<template>
  <div class="container">
    <view-box ref="viewBox" body-padding-top="46px" body-padding-bottom="53px">
      <x-header class="my-header" >订单列表</x-header>
      <group>
        <datetime v-model="startDate" @on-clear="getdate" format="YYYY-MM-DD HH:mm" placeholder="请选择" :title="$t('开始服务时间')"></datetime>
      </group>
      <group>
        <p style="margin-left: 20px;margin-top: 15px;margin-bottom: 15px">服务总次数：{{totalTime}}</p>
        <p style="margin-left: 20px;margin-top: 15px;margin-bottom: 15px">剩余次数：{{restTime}}</p>
      </group>
      <group>
        <x-switch :title="$t('是否更换护士')" v-model="isChange"></x-switch>
      </group>
      <div style="margin-top: 20px" v-if="isChange">
        <checker  style="margin-left: 20px"
                  v-model="tag"
                  type="checkbox"
                  default-item-class="demo5-item"
                  selected-item-class="demo5-item-selected"
        >
          <checker-item  :value="$t('认真负责')">{{$t('认真负责')}}</checker-item>
          <checker-item  :value="$t('有耐心')">{{$t('有耐心')}}</checker-item>
          <checker-item  :value="$t('经验丰富')">{{$t('经验丰富')}}</checker-item>
          <checker-item  :value="$t('有亲和力')">{{$t('有亲和力')}}</checker-item>
        </checker>
      </div>
      <group v-if="isChange">
        <x-textarea v-model="text" :title="$t('更换护士评价')" :max="200" :placeholder="$t('')" :show-counter="false" :height="200" :rows="8" :cols="30"></x-textarea>
      </group>
      <group style="position: absolute;bottom: 20px;width: 100%">
        <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="appointOneMore()">再次预约</x-button>
      </group>
    </view-box>
    <toast v-model="success" type="text" :time="1500" is-show-mask text="预约成功" position="bottom"></toast>
  </div>
</template>

<script>
  import {Checker, CheckerItem,XTextarea,XSwitch,XButton,Toast,Group,Radio,Datetime,XHeader,ViewBox} from 'vux'
  export default {
    data(){
      return{
        startDate:'',
        oid:'',
        success:false,
        totalTime:0,
        restTime:0,
        isChange:false,
        tag:[],
        coidList:[],
        text:''
      }
    },
    mounted(){
        this.oid=this.$route.query.oid
      this.getOrderDetails()
      this.totalTime=this.$route.query.time
      this.getLeftTime(this.oid)
    },
    methods:{
        //获取子订单coid
      getOrderDetails(){
        let data={
          order_type:1,
          user_type:1
        }
        this.Ajax('post','/Order/order/detail/oid/'+this.oid,data,(res)=>{
          this.coidList=res.dataList
          console.log(this.coidList)
        })
      },
      //更换护士评价
      changeNurse(){
        let time=this.totalTime-this.restTime-1
        let coid=this.coidList[time]
        let data={
          tag:this.tag,
          text:this.text,
          type:3
        }
        this.Ajax('post','/Order/Order/comment/coid/'+coid,data,(res)=>{

        })
      },
        //再次预约
      appointOneMore(){
          if(this.isChange){
              this.changeNurse()
          }
        let start_date_time=this.startDate.replace(/-/g,'/')
        start_date_time=new Date(start_date_time).getTime()
        let end_date_time=start_date_time+3600000

        let data={
            start_date_time:start_date_time,
            end_date_time:end_date_time
          }
          this.Ajax('post','/Order/Order/appointment/oid/'+this.oid,data,(res)=>{
              console.log(res)
              if(res.status=='success'){
                  this.success=true
                setTimeout(()=>{
                  this.$router.push('/user_center')
                },1500)
              }
          })
      },
      //获取剩余订单次数
      getLeftTime(oid){
          this.Ajax('get','/Order/Order/rest/oid/'+oid,{},(res)=>{
              this.restTime=res.data.time
          })
      },
      getdate(){          //转换年月日格式
        let now = new Date()
        let cmonth = now.getMonth() + 1
        let day = now.getDate()
        if (cmonth < 10) cmonth = '0' + cmonth
        if (day < 10) day = '0' + day
        this.startDate = now.getFullYear() + '-' + cmonth + '-' + day
      },
    },
    components:{
      Checker, CheckerItem,XTextarea,XSwitch,XButton,Toast,Group,Radio,Datetime,XHeader,ViewBox
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .my-header {
    background-color: rgb(255, 104, 140);
    position: fixed;
    height: 46px;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
  }
  .demo5-item {
    width: 80px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #ccc;
    background-color: #fff;
    margin-right: 6px;
  }
  .demo5-item-selected {
    background: #ffffff url() no-repeat right bottom;
    border-color: #ff4a00;
  }
</style>
